/**
 * @author:linjiye
 * @date:2025/1/4
 * @desc:
 **/

import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useState} from 'react'
import FormTitle from "@/components/FormTitle";
import FcTextInput from "@/components/FcTextInput";
import FcSlider from "@/components/FcSlider";
import FileTabBtn from "@/components/FileTabBtn";
import {useDispatch, useSelector} from "react-redux";
import {set_params} from "@/store/reducer/explosiveFission/explosiveFissionSlice";
import Loading from "@/components/Loading";

type Props = {}

const FissionResult = (props: Props) => {
    // const [txt,setTxt] = useState('')
    const [FcSliderPSVal, setFcSliderPSVal] = useState(0)
    const [list, setList] = useState([
        {
            name: '1',
            id: 1
        }, {
            name: '2',
            id: 2,
        }, {
            name: '3',
            id: 3,
        }
    ])
    const [carouselIndex, setCarouselIndex] = useState(0);

    const [params,setParams] = useState({
        aList: [],
        bList: [],
        cList: [],
        aIndex: 0,
        bIndex: 0,
        cIndex: 0,
    })

    const dispatch = useDispatch()
    let p = useSelector(state => state.explosiveFission.params)
    console.log(p,'98765666');

    useEffect(() => {
        if(p){
            setParams(p)
        }
    }, [p]);

    const handleDelete = (type,index) => {
        let list = [...params[type]]
        list.splice(index, 1)
        dispatch(set_params({
            ...params,
            [type]: list
        }))
    }

    function handleClickSub(type,index) {
        dispatch(set_params({
            ...params,
            [type]: index - 1
        }))
    }

    function handleClickAdd(type,index) {
        dispatch(set_params({
            ...params,
            [type]: index + 1
        }))
    }

    function setTxt(val,index,type) {
        let list = [...params[type]]
        list[index] = val
        dispatch(set_params({
           ...params,
            [type]: list
        }))
    }

    return (
        <View style={styles.container}>
            <FormTitle isLeftIcon textJB title='开头A-裂变' titleHint={`（${params?.aIndex+1}/${params?.aList?.length})`} titleHintStyle={{marginLeft:0}} right={
                <View style={{flexDirection: 'row',alignItems: 'center'}}>
                    {params?.aList?.length > 1 &&
                        <TouchableOpacity onPress={() => handleDelete('aList',params.aIndex)} style={{marginRight: 13}}>
                            <Text style={{ fontFamily: 'FcIconFont',fontSize: 20,color: 'rgba(0,0,0,0.5)' }}>&#xe61d;</Text>
                        </TouchableOpacity>
                    }
                    <FileTabBtn index={carouselIndex} len={params?.aList?.length} onClickSub={() => handleClickSub('aIndex',params.aIndex)}
                                onClickAdd={()=>handleClickAdd('aIndex',params.aIndex)}/>
                </View>
            }/>
            <FcTextInput multiline text={params?.aList[params?.aIndex || 0]}
                         onChangeText={(val)=>setTxt(val,params.aIndex,'aList')}
                         height={160}
                         style={{marginTop: 0}}
                         positionEle={
                             <>
                                 {!params?.aList[params?.aIndex || 0] &&  <Loading style={styles.loading} iconStyle={{width:50,height:50}}/>}
                             </>
                         }
            />
            <FormTitle isLeftIcon textJB title='中间B-裂变' titleHint={`（${params?.bIndex+1}/${params?.bList?.length})`} titleHintStyle={{marginLeft:0}}right={
                <View style={{flexDirection: 'row',alignItems: 'center'}}>
                    {params?.bList?.length > 1 &&
                        <TouchableOpacity onPress={() => handleDelete('bList',params.aIndex)} style={{marginRight: 13}}>
                            <Text style={{ fontFamily: 'FcIconFont',fontSize: 20,color: 'rgba(0,0,0,0.5)' }}>&#xe61d;</Text>
                        </TouchableOpacity>
                    }
                    <FileTabBtn index={carouselIndex} len={params?.bList?.length} onClickSub={() => handleClickSub('bIndex',params.bIndex)}
                                onClickAdd={()=>handleClickAdd('bIndex',params.bIndex)}/>
                </View>
            }/>
            <FcTextInput multiline text={params?.bList[params?.bIndex || 0]}
                         onChangeText={(val)=>setTxt(val,params.bIndex,'bList')}
                         height={160}
                         style={{marginTop: 0}}
                         positionEle={
                             <>
                                 {!params?.bList[params?.aIndex || 0] &&  <Loading style={styles.loading} iconStyle={{width:50,height:50}}/>}
                             </>
                         }
            />
            <FormTitle isLeftIcon textJB title='结尾C-裂变' titleHint={`（${params?.cIndex+1}/${params?.cList?.length})`} titleHintStyle={{marginLeft:0}}right={
                <View style={{flexDirection: 'row',alignItems: 'center'}}>
                    {params?.cList?.length > 1 &&
                        <TouchableOpacity onPress={() => handleDelete('cList',params.aIndex)} style={{marginRight: 13}}>
                            <Text style={{ fontFamily: 'FcIconFont',fontSize: 20,color: 'rgba(0,0,0,0.5)' }}>&#xe61d;</Text>
                        </TouchableOpacity>
                    }
                    <FileTabBtn index={carouselIndex} len={params?.cList?.length} onClickSub={() => handleClickSub('cIndex',params.cIndex)}
                                onClickAdd={()=>handleClickAdd('cIndex',params.cIndex)}/>
                </View>
            }/>
            <FcTextInput multiline text={params?.cList[params?.cIndex || 0]}
                         onChangeText={(val)=>setTxt(val,params.cIndex,'cList')}
                         height={160}
                         style={{marginTop: 0}}
                         positionEle={
                             <>
                                 {!params?.cList[params?.aIndex || 0] &&  <Loading style={styles.loading} iconStyle={{width:50,height:50}}/>}
                             </>
                         }
            />
            {/*<FormTitle title='输出篇数'*/}
            {/*           right={*/}
            {/*               <View style={styles.slider_wrap}>*/}
            {/*                   <TextInput style={styles.slider_input} value={FcSliderPSVal + ''}></TextInput>*/}
            {/*                   <Text style={styles.slider_txt}>个</Text>*/}
            {/*               </View>*/}
            {/*           }/>*/}
            {/*<FcSlider value={FcSliderPSVal} showMinMax onFcSlider={setFcSliderPSVal}/>*/}
        </View>
    )
}

export default FissionResult

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderRadius: 8,
        paddingHorizontal: 16,
        paddingBottom: 16,
        overflow: "hidden"
    },
    slider_wrap: {
        flexDirection: "row",
        alignItems: "center",
    },
    slider_input: {
        width: 56,
        height: 32,
        textAlign: "center",
        borderRadius: 8,
        backgroundColor: '#F1F2F4'
    },
    slider_txt: {
        marginLeft: 8,
        fontSize: 14,
        color: 'rgba(0,0,0,0.5)'
    },
    loading:{
        position:'absolute',
        right:0,
        top:0,
        zIndex:1000,
        backgroundColor:'#F1F2F4',
    }
})